<template>
    <!-- 评论列表 -->
    <div class="comment-list">
        <h3 v-if="commentList.length>0">{{ title }}</h3>
        <h4 v-else>暂无评论</h4>
        <ul>
            <li
                class="item"
                v-for="item of commentList"
                :key="item.commentId"
            >
                <!-- 用户头像 -->
                <div class="avatar">
                    <img
                        :src="item.user.avatarUrl + '?param=150y150'"
                        :alt="item.user.nickname"
                    />
                </div>
                <div class="info">
                    <h2 class="flex-between">
                        <span>
                            {{ item.user.nickname }}
                            <small> · {{ utils.formatMsgTime(item.time) }}</small></span>
                        <div class="tool flex-row">
                            <i
                                class="iconfont nicezan1 icon-zan"
                                :class="item.liked ? 'active' : ''"
                            ></i>
                            <span>({{ item.likedCount }})</span>
                            <i class="iconfont nicevoice icon-comment"></i>
                        </div>
                    </h2>
                    <div class="content">
                        {{ item.content }}
                        <div
                            class="beReqlied"
                            v-for="subItem of item.beReplied"
                            :key="subItem.beRepliedCommentId"
                        >
                            <small>@{{ subItem.user.nickname }}：</small>{{ subItem.content }}
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    props: {
        title: {
            type: String
        },
        commentList: {
            type: Array
        },
        currentCommentId: {
            type: [String, Number]
        }
    },
    created() {

    },
    methods: {

    },
}
</script>

<style lang="less" scoped>
.comment-list {
    height: 100%;
    margin-top: 20px;
    h3 {
        border-left: 4px solid #fa2800;
        padding: 2px 6px;
        margin-bottom: 15px;
        font-weight: bold;
    }
    ul {
        li {
            padding: 20px 0;
            width: 100%;
            display: flex;
            .avatar {
                width: 45px;
                height: 45px;
                border-radius: 50%;
                margin-right: 12px;
                flex-shrink: 0;
                cursor: pointer;
                img {
                    width: 100%;
                    border-radius: 50%;
                }
            }
            .info {
                flex: 1;
                h2 {
                    font-size: 15px;
                    margin-right: 5px;
                    margin-bottom: 10px;
                    cursor: pointer;
                    small {
                        font-size: 12px;
                        color: #a5a5c1;
                        font-weight: 200;
                    }
                }
                p {
                    width: 100%;
                    font-size: 12px;
                    color: #666666;
                    line-height: 1.6;
                    padding: 5px 10px;
                    background: #f5f5f5;
                    margin-top: 5px;
                    border-radius: 3px;
                }
                .tool {
                    i {
                        font-size: 24px;
                        font-weight: 100;
                        margin-left: 20px;
                        cursor: pointer;
                        transition: all 0.4s;
                        &.icon-zan {
                            &.active {
                                color: #fa2800;
                            }
                        }
                    }
                    span {
                        font-size: 12px;
                        margin-top: 2px;
                        color: #666;
                        font-weight: 200;
                        position: relative;
                        &::after {
                            content: "";
                            width: 1px;
                            height: 13px;
                            background: #4a4a4a;
                            opacity: 0.7;
                            position: absolute;
                            top: 2px;
                            right: -12px;
                        }
                    }
                }
                .content {
                    padding: 15px;
                    background: #f5f5f5;
                    border-radius: 5px;
                    .beReqlied {
                        margin-top: 10px;
                        background: #ffffff;
                        padding: 8px 10px;
                        border-radius: 3px;
                        color: #666666;
                        small {
                            color: #fa2800;
                        }
                    }
                }
            }
        }
    }
}
</style>